<template>
    <p>Home</p>
    <p>js跳转</p>
    <button @click="pushStr">push-字符串-跳转</button>
    <button @click="pushPath">push-路径-跳转</button>
    <button @click="pushName">push-名字-跳转</button>
    <p>传递参数</p>
    <button @click="pushNameParams">push-名字-params-跳转</button>
    <button @click="pushPathQuery">push-路径-params-跳转</button>


 
  

</template>

<script setup>
import {onMounted} from 'vue';
import {useRouter} from 'vue-router'

//获取路由的实例化对象
const router = useRouter()



const pushStr = () =>{
    router.push('/about')
}

const pushPath = ()=>{
    router.push({path:'/about'})
}

const pushName = () =>{
    router.push({name:'about'})
}

const pushNameParams = () =>{
    router.push({name:'about',state:{ params: {name:'tom'}}})
}

const pushPathQuery = () =>{
    router.push({path:'/about',query:{name: 'tom'}})
}




</script>